<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>OLPC Bookreader Demo</title>

    <link href="js/carousel.css" rel="stylesheet" type="text/css">
    <link href="js/yui.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" media="screen,projection,print" href="js/jquery.cluetip.css" />

    <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
    <script type="text/javascript" src="GnuBook/GnuBook.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/yui.js"></script>
    <script type="text/javascript" src="js/carousel.js"></script>
    <script type="text/javascript" src="js/jquery.tiptoe.js">

    <script type="text/javascript" src="js/jquery.hoverIntent.js"></script>
    <script type="text/javascript" src="js/jquery.cluetip.js"></script>
    <script type="text/javascript" src="js/toggle.js"></script>
    <script type="text/javascript" src="js/books.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            var ids = books;
            $("body").append('<iframe src="embed.html?id=' + ids[0] + '" frameborder="0" name="bookframe"></iframe>');

            for (var i in ids) {
                var id = ids[i];
                    var html = '<li><a class="title" style="padding-bottom: 4px;" title="Book of Nursery Rhymes|The ever-attractive Mother Goose Rhymes and Jingles - a child\'s first introduction to rhyme and rhythm, adapted to the natural development of the intellectual powers of a child." href="embed.html?id=XXX" target="bookframe"><img border="1" alt="thumbnail" src="books/XXX/0001.jpg" width="155" height="185" style="margin: 9px 13px 4px 13px;" />Book of Nursery Rhymes</a></li>'.replace(/XXX/g, id);
                    $('#booklist').append(html);
            }
        });
    </script>



<!--
	Inlined styles for my overrides to the carousel for this demo.
	Normally I would put this in a separate CSS file.
-->
<style type="text/css">
.carousel-component {
	padding:0px 2px 2px 2px;
	margin:0px;
	width:200px; /* seems to be needed for safari */
}

.carousel-component .carousel-list li {
	margin:0px;
	padding:2px;
	width:182px;
}

/* Applies only to vertical carousels */
.carousel-component .carousel-vertical li {
	margin-bottom:0px;
	padding: 0px 0px 4px 0px;
	font-family: Georgia, san-serif;
	font-size: 14px;
}

.carousel-component .carousel-list li a {
	display:block;
	border:1px solid #e2edfa;
	outline:none;
	color: #5d593f;
	text-decoration: none;
}

.carousel-component .carousel-list li a:hover {
	border: 1px solid #aaaaaa;
	background-color: #fff;
	color: #2e2e24;
	text-decoration: underline;
}

.carousel-component .carousel-list li img {
	display:block;
	color: #2b4c5b;
	text-decoration: none;
	border: 1px solid #2e2e24;
}

#up-arrow {
	cursor:pointer;
	margin-top:10px;
}

#down-arrow {
	cursor:pointer;
	margin-top:2px;
	margin-bottom: 20px;
}
</style>


<script type="text/javascript">

var lastRan = -1;


var carousel; // for ease of debugging; globals generally not a good idea
var pageLoad = function()
{
	carousel = new YAHOO.extension.Carousel("dhtml-carousel",
		{
			numVisible:        2,
			animationSpeed:    0.25,
			scrollInc:         2,
			orientation:       "vertical",
			navMargin:         0,
			loadInitHandler:   loadInitialItems,
			prevElement:     "up-arrow",
			nextElement:     "down-arrow",
			loadNextHandler:   loadNextItems,
			loadPrevHandler:   loadPrevItems,
			prevButtonStateHandler:   handlePrevButtonState,
			size: 56,
			wrap: true
		}
	);
};

YAHOO.util.Event.addListener(window, 'load', pageLoad);


</script>

  <style type="text/css">
   html, body, iframe { margin:0; padding:0; height:100%; }
   iframe { display:block; width: 100%; border:none; }
  </style>


</head>

<body style="background-color: #e2edfa; overflow: hidden; margin-right:200px" id="GnuBook">

<div id="GnuBookCarousel" style="position: absolute; margin:0px 0px 0px 0px;width:190px; right:7px; top:0px; bottom:0px;">
<div>
	<img id="up-arrow" class="left-button-image" src="images/up-enabled.gif" alt="Previous Button"/>
</div>

<div id="dhtml-carousel" class="carousel-component">
	<div class="carousel-clip-region">
		<ul class="carousel-list" id="booklist">
		</ul>
	</div>
</div>

<div>
	<img id="down-arrow" class="right-button-image" src="images/down-enabled.gif" alt="Next Button"/>
</div>

<div style="margin-top: -10px;"><a href="#" onclick="ReSize('GnuBook',0);tOff('GnuBookCarousel');tOn('ShowCarousel')" style="color: #5dacec; text-decoration: none; font-family: Georgia, san-serif;">Hide This Collection<a/></div>
</div>

<div id="ShowCarousel" style="visibility:hidden;position: absolute; bottom: 30px; right: 30px; background-color: #e2edfa; border: 1px solid #5dacec; padding: 10px;"><a href="#" style="color: #900; text-decoration: none; font-family: Georgia, san-serif;" onclick="ReSize('GnuBook',200);tOn('GnuBookCarousel');tOff('ShowCarousel')">More Childrens Books ...<a/></div>

</body>
</html>
